<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>晚风后台管理</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
</head>

<style>

</style>

<body>

    <div id="app" class="col-sm-12 column">
        <ol class="breadcrumb">
            <li class="active">菜单
            </li>
            <li class="active">产品信息
            </li>
        </ol>

        <div class="panel panel-default">
            <div class="panel-heading">
                搜索
            </div>
            <div class="panel-body">
                <div class="form-inline">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" v-model="userArticlename" placeholder="请输入姓名"
                            @keyup.enter="getArticlebyname">
                    </div>
                    <div class="form-group">

                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default" @click="getArticlebyname">开始搜索</button>
                    </div>
                </div>

                <table class="table table-striped" style='table-layout:fixed;'>
                    <thead>
                        <tr>
                            <th>
                                编号
                            </th>
                            <th>
                                标题
                            </th>
                            <th>
                                用户名
                            </th>
                            <th>
                                内容
                            </th>
                            <th>
                                照片
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(item,index) in this.ArticleData" :key="index">
                            <th style="width:30px" scope="row">{{item.id}}</th>
                            <td style="width:50px" scope="row">{{item.articlename}}</td>
                            <td style="width:30px" scope="row">{{item.author}}</td>
                            <td scope="row">{{item.text}}</td>
                            <td scope="row"><img width="150px" :src="item.Image"></td>

                            <td scope="row">
                                <button type="button" class="btn btn-danger" @click="delectArticle(item.id)">删除</button>

                                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                                    @click="selectByid(item.id)">更新</button>












                                <button type="button" class="btn btn-warning">封禁</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ul class="pagination" style="float: right;">



                    <li> <button class="btn btn-primary" type="button" @click="prePage">上一页</button>
                        <input style="width: 30px;" type="text" v-model="userpage" @change="changepageshow"
                            @keyup.enter="changepageshow" @click=" userpagenull">
                        <button class="btn btn-primary" type="button" @click="nextPage">下一页</button>
                        <p style="float:right; font-size: 20px;">共{{this.pageNum-1}}页</p>
                    </li>



                </ul>
            </div>
        </div>
        <!-- --------------------------------- -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">更新留言</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="sr-only" for="name">名称</label>
                            <input type="text" class="form-control" id="name" v-model="selectarticledata.articlename"
                                placeholder="请输入名称">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="inputfile">文件输入</label>
                            <input type="file" id="inputfile" @change="Files">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">内容</label>
                            <textarea class="form-control" rows="13" style="min-width: 90%" aria-label="With textarea"
                                v-model="selectarticledata.text"></textarea>
                        </div>
                        <button type="submit" class="btn btn-default" @click="updateArticles">提交</button>



                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"
                            @click="selectbyupdate">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>












</body>

</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            ArticleData: {
                id: '',
                articlename: '',
                author: '',
                text: '',
                Image: ''

            },

            selectarticledata: {
                articlename: '',
                text: '',
                Image: '',
            },



            userArticlename: '',

            // 所有页面的数据
            totalPage: {
                id: '',
                articlename: '',
                author: '',
                text: '',
                Image: ''
            },
            // 每页显示数量
            pageSize: 5,
            // 共几页
            pageNum: 1,
            // 当前显示的数据
            dataShow: "",
            // 默认当前显示第一页
            currentPage: 0,
            userpage: 0,
            isselectupdate: false


        },
        created() {
            this.getArticleData();
        },
        methods: {
            getArticleData: function () {
                const token = window.localStorage.getItem('token')
                let that = this;
                axios.get(
                        `http://localhost:8999/MessageBoard_war/getArticleData`, {
                            headers: {
                                token: `${token}`
                            }
                        }
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.ArticleData = response.data.data;



                            // 分页逻辑
                            that.pageNum = Math.ceil(that.ArticleData.length / that.pageSize) || 1;

                            for (let i = 0; i < that.pageNum; i++) {
                                // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
                                // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
                                that.totalPage[i] = that.ArticleData.slice(that.pageSize * i, that
                                    .pageSize * (i + 1))
                            }
                            // 获取到数据后显示第一页内容
                            that.ArticleData = that.totalPage[that.currentPage];



                        } else {
                            alert(error.data.data)
                        }
                    })

            },
            getArticlebyname: function () {

                if (this.userArticlename == '') {
                    this.getArticleData();
                }
                const token = window.localStorage.getItem('token')
                let that = this;
                axios.get(
                        `http://localhost:8999/MessageBoard_war/selectByname?name=${this.userArticlename}`, {
                            headers: {
                                token: `${token}`
                            }
                        }
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.ArticleData = response.data.data;

                            // 分页逻辑
                            that.pageNum = Math.ceil(that.ArticleData.length / that.pageSize) || 1;

                            for (let i = 0; i < that.pageNum; i++) {
                                // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
                                // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
                                that.totalPage[i] = that.ArticleData.slice(that.pageSize * i, that
                                    .pageSize * (i + 1))
                            }
                            // 获取到数据后显示第一页内容
                            that.ArticleData = that.totalPage[that.currentPage];

                        } else {
                          alert(response.data.data)
                        }
                    })

            },
            delectArticle(id) {

                const token = window.localStorage.getItem('token');                    
                    axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/deletearticle?id=${id}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (res) {
                        alert(res.data.data)
                    })
                    .catch(function (res) {
                        alert(res.data.data)
                    })

            },
            updateArticles() {
                const token = window.localStorage.getItem('token');
                axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/updateServletbyadmin?articlename=${this.selectarticledata.articlename}&text=${this.selectarticledata.text}&img=${this.selectarticledata.Image}&id=${this.selectarticledata.id}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        if (response.data.code == 200) {
                            this.isselectupdate = true;
                            alert("修改成功");
                        } else {
                            alert(response.data.data)
                        }
                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });
            },
            selectByid(id) {
                let that = this;
                const token = window.localStorage.getItem('token');
                axios({
                        method: 'get',
                        url: `http://localhost:8999/MessageBoard_war/Selectbyid?id=${id}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        that.selectarticledata = response.data.data;
                    })
                    .catch(function (error) {});
            },
            selectbyupdate() {
                    this.userArticlename = this.selectarticledata.articlename;
                    this.getArticlebyname();
            },
            // 下一页
            nextPage() {
                if (this.currentPage === this.pageNum - 1) return;
                this.ArticleData = this.totalPage[++this.currentPage];
                this.userpage = this.currentPage;
            },
            // 上一页
            prePage() {
                if (this.currentPage === 0) return;
                this.ArticleData = this.totalPage[--this.currentPage];
                this.userpage = this.currentPage;
            },
            changepageshow() {
                if (this.userpage === 0 || this.userpage < 0) return;


                var patrn = /^[0-9]{1,20}$/;

                if (!patrn.exec(this.userpage)) {
                    alert("你就那么想看bug吗？");
                    this.userpage = this.currentPage;
                    return;
                } else {
                    this.ArticleData = this.totalPage[this.userpage];
                    this.currentPage = this.userpage;
                }

            },
            userpagenull() {

                this.userpage = null

            },
            Files() {
                this.imgdata = event.target.files[0];
                let param = new FormData();
                param.append('image', this.imgdata);
                axios.post('https://www.imgtp.com/api/upload', param, {
                        headers: {
                            'token': 'fa6fca8ee47b678a3b055ac1daa72d47'
                        }
                    })
                    .then((response) => {
                        if (response.data.code == 200) {
                            this.articledata.Image = response.data.data.url;
                        } else {
                            alert("请上传照片")
                        }
                    })
                    .catch(function (error) {
                        alert(error)
                    });
            },

        }

    })
</script>

</html>